<template>
	<view class="bi-driver-card" :class="['bi-driver-card--' + type, { 'is-selected': selected }]" @click="handleClick">
		<view class="bi-driver-card__avatar">
			<ui-avatar size="medium" :src="avatar" :stop-propagation="false"></ui-avatar>
		</view>
		<view class="bi-driver-card__name">{{ name }}</view>
		<view class="bi-driver-card__addon">
			<slot name="addon"></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BiDriverCard',
	props: {
		id: {
			type: String
		},
		name: {
			type: String
		},
		phone: {
			type: String
		},
		avatar: {
			type: String
		},
		type: {
			type: String,
			default: 'default',
			validator (value) {
				return ['default', 'background'].includes(value)
			}
		},
		selected: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleClick () {
			this.$emit('click')
		}
	}
}
</script>

<style lang="less">
.bi-driver-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.bi-driver-card__avatar{
	margin-bottom: 6px;
}
.bi-driver-card__name{
	margin-bottom: 4px;
}
.bi-driver-card__addon {
	flex: 1;
	width: 100%;
}
.bi-driver-card--background {
	background-color: #f3f4f6;
	border-radius: 8px;
	padding: 11px 15px;
	border: 1px solid #f3f4f6;
	&.is-selected {
		border-color: #F18662;
	}
}
</style>